<template>
	<view>
	<!-- <view style="background: #f5f5f9;"> -->
		<view class="c-box" id="inquiry">
		    <view class="product">
		        <view style="padding: 0 20rpx;">
		            <view class="pro-ul">
		                <view class="center pro-li" v-for="(item,index) in list" :key="index" style="height: 120rpx;" >
		                    <view class="center pro-a" @click="toDetail(item.id)" style="position: relative">
		                        <view style="width: 450rpx">
		                            <view class="beyond pro-h2" style="font-size: 14px;font-weight: bold">
		                                {{'询价产品：'+item.productName}}</view>
		                            <view>
		                                <view style="font-size: 13px">{{'询价时间：'+item.inquiryTime}}</view>
		                            </view>
		                        </view>
		                        <view>
		                            <view class="btn">询价详情</view>
		                        </view>
		                        <view class="red" v-show="item.readStatus == 0"></view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="lastLine" v-if="deadLine">我是有底线的</view>
		    <view class="lastLine" v-if="list.length == 0">没有数据</view>
		</view>
	</view>
</template>

<script>
import inquiryApi from '@/api/inquiryList.js';
import commonApi from '@/utils/commonMethod.js';
export default {
	
	data() {
		return {
			currentUser: {},
			queryList: {
				isFirstPage: false,
				hasNextPage: false,
				nextPage: 1,
			},
			list: [],
			deadLine: false,
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
   async mounted() {
		const currentUser = await commonApi.currentUserAxios();
		this.currentUser = currentUser.data.session_user_h5;
		this.getInquiryList()
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"询价单列表")
			
		},
		//无限滚动加载
		load() {
			if (this.queryList.hasNextPage) {      //先判断下一页是否有数据
				this.getInquiryList();              //拉取接口数据
			} else {
				console.log("到底了")
				this.deadLine = true
				}
		},
		getCurrentUser() {
			return axios.get("/h5/login/getCurrentUser")
		},
		getInquiryList() {
			inquiryApi.getInquiryList(this.queryList.nextPage).then((res) => {
				this.queryList = res.data.result;
				if (this.queryList.isFirstPage) {         //第一页就直接赋值
					this.list = this.queryList.list;
				} else {                         //将后面页码的数据和之前的数据拼合
					this.list = [...this.list, ...this.queryList.list]
				}
			})
		},
		toDetail(id){
			uni.redirectTo({
				url:"/pages/product/inquiry/inquiryDetail?inquiryId=" + id,
			})
		}
	}
}
	
</script>

<style>
	.product {
	    padding: 0 20rpx;
	}
	.pro-li {
	    padding: 10rpx;
	    background: #fff;
	    border-radius: 10rpx;
	    overflow: hidden;
	    margin-top: 30rpx;
	}
	.beyond {
		max-width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;
	}
	.pro-h2 {
		padding-top: 5rpx;
		font-size: 14rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.btn {
		float: right;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 30rpx;
		background: #029e9d;
		border-radius: 5rpx;
		color: #fff;
		font-size: 25rpx;
	}

	.red {
		position: absolute;
		top: 10%;
		right: 0;
		width: 0.186666rem;
		height: 0.186666rem;
		border-radius: 50%;
		border: 0.053333rem solid #fff;
		background: #fc5260;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.lastLine {
	    font-size: 20rpx;
	    color: #b0b2bf;
	    line-height: 70rpx;
	    text-align: center;
	    padding-bottom: 30rpx;
	    margin-top: 100rpx;
	}
</style>